<template>
  <div class="task">
    <div
      :class="{ items: true, active: item.status == true }"
      v-for="(item, index) in tasklist"
      :key="index"
    >
      <div class="left">
        <input type="checkbox" @click="change(item.id)" />
        <span>vue</span>
      </div>
      <div class="right" @click="del(item.id)">删除</div>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "../stores/index";

let $store = useCounterStore();

let { tasklist } = $store;

let del = (id) => {
  $store.del(id);
};
let change = (id) => {
  $store.change(id);
};
</script>

<style scoped>
.task {
  margin-top: 20px;
  height: 500px;
}
.task .items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  height: 50px;
  width: 380px;
  background-color: red;
  padding: 0 20px;
  color: white;
}
.task .items .left input {
  margin-right: 20px;
}
.task .active {
  background-color: rgb(16, 231, 163);
}
</style>